<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>智慧工地</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/master.css" />
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
		<link rel="stylesheet" href="../libs/waitMe/waitMe.min.css">
		<!-- 遮罩css -->
	</head>

	<body style="background: url(../images/login3.png) top no-repeat;background-size:100%;">
		<div class="mui-collapse-content formBox" id="app">
			<h2 class="text-3E3E3E" style="color:#00BC8D;font-weight: 700;">欢迎登录智慧工地</h2>

			<form class="mui-input-group">
				<div class="mui-input-row mui-row">
					<div class="mui-col-sm-1 mui-col-xs-2">
						<label><img src="../images/login_number-icon.png"/></label>
					</div>
					<div class="mui-col-sm-11 mui-col-xs-10">
						<input v-model="username" type="text" class="mui-input-clear" id="phone" placeholder="账户">
					</div>
				</div>
				<div class="mui-line"></div>
				<div class="mui-input-row mui-row">
					<div class="mui-col-sm-1 mui-col-xs-2">
						<label class=""><img src="../images/login_email-icon.png"/></label>
					</div>
					<div class="mui-col-sm-7 mui-col-xs-6">
						<input v-model="userpwd" type="password" id="msgCode" placeholder="密码">
					</div>
				</div>
				<div class="mui-line"></div>
				<div class="mui-button-row mui-row btn-login">
					<button class="mui-btn mui-btn-primary" @click="loginClick" type="button">登录</button>
				</div>
			</form>
		</div>
		<div class="mui-text-center" style="width: 100%;">
			<img src="../images/logo111.png" width="60%"/>
		</div>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../libs/waitMe/waitMe.min.js"></script>
	<script src="../js/setting.js"></script>
	<script src="../js/common.js"></script>
	<script src="../js/vue.min.js"></script>
	<script>
		//处理逻辑：1秒内，连续两次按返回键，则退出应用；
		var showMenu = false;
		var first = null;
		mui.back = function() {
			if(showMenu) {
				closeMenu();
			} else {
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出应用');
					setTimeout(function() {
						first = null;
					}, 2000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			}
		};

		var h = mui(document).common();

		var app = new Vue({
			el: '#app',
			data: {
				username: "",
				userpwd: ""
			},
			methods: {
				loginClick: function() {
					login(this.username, this.userpwd);
				}
			}
		})

		mui.plusReady(function() { //如果需要调用plus
			login(); //初始化
		});

		function login(username, userpwd) {
			if(username==null){
				return;
			}
			var xhr = null;
			var url = setting.ip + "v1/login";
			var data = {
				"username": username,
				"password": userpwd
			};
			xhr = new plus.net.XMLHttpRequest();
			xhr.open("POST", url);
			xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.send(JSON.stringify(data));
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4) {
					if(xhr.status == 200) {
						var fole = eval('(' + xhr.responseText + ')');
						if(fole.result == 1) {
							mui.toast("登录成功!");
							var htype = {
								obj: this,
								url: 'index.html',
								id: 'index'
							}
							h.eachClick(htype);
						} else {
							mui.toast(fole.msg);
						}
					}
				}
			}
		}
	</script>

</html>